/* Import fonts that look like messy, child handwriting/drawing */
@import url('https://fonts.googleapis.com/css2?family=Patrick+Hand&family=Schoolbell&family=Gochi+Hand&display=swap');
/* Derived Color Palette from image_0.png - cute, simple primary-like colors */
:root {
--color-cream: #fdf1e8; /* Soft off-white background */
--color-black: #000000;
--color-blue: #0271c0;
--color-teal: #008fa0;
--color-green: #4caf50;
--color-olive: #6c7e3f;
--color-yellow: #fdd01a;
--color-orange: #f48a28;
--color-red: #e7301c;
--color-purple: #c028a0;
--color-maroon: #880000;
}
body {
background-color: var(--color-cream);
color: var(--color-black);
font-family: 'Schoolbell', cursive; /* Main messy handwriting */
font-size: 26px;
margin: 0;
padding: 20px;
padding-bottom: 250px; /* Space so content doesn't get hidden behind dudu */
cursor: crosshair;
overflow-x: hidden;
}
/* Base navigation styles - simple links, blue, underlined */
nav {
display: flex;
gap: 20px;
margin-bottom: 40px;
}
nav a {
color: var(--color-blue);
text-decoration: underline;
}
nav a:hover {
color: var(--color-red);
}
/* Container for main content */
.main-container {
max-width: 600px;
margin: 0 auto;
background-color: transparent; /* No complex boxes */
padding: 20px;
}
/* Standard Heading styles - larger messy font */
h1 {
font-family: 'Gochi Hand', cursive; /* Wobbly marker style */
font-size: 50px;
margin-top: 0;
}
/* Wobbly effects for main text - simulate slight hand-drawing shifts */
.word-wobble-1 { transform: rotate(-1.5deg); display: inline-block; }
.word-wobble-2 { transform: rotate(1deg); display: inline-block; }
/* Styles for intro text components on the homepage */
.intro-text, .intro-note {
line-height: 1.4;
word-spacing: 3px;
margin-top: 20px;
}
.intro-note {
font-size: 22px;
color: var(--color-olive);
font-style: italic;
transform: rotate(1.5deg);
}
/* Large child handwriting signature, fixed to the bottom, multicolored */
.signature {
font-family: 'Patrick Hand', cursive; /* Inherently wobbly font */
font-size: clamp(100px, 20vw, 250px);
text-align: center;
position: fixed;
bottom: 40px; /* <--- Subiu o dudu aqui */
left: 50%;
transform: translateX(-50%) rotate(-3deg);
margin: 0;
line-height: 0.8;
z-index: 100; /* Ensure it stays on top */
white-space: nowrap;
}
/* Individual letter color rules derived from the ref image */
.signature span {
display: inline-block;
-webkit-text-stroke: 1px var(--color-black); /* Thin border */
text-shadow: 2px 2px 0 var(--color-black);
}
.teal-char { color: var(--color-teal); transform: rotate(4deg) translateY(-8px); margin-right: -10px; }
.orange-char { color: var(--color-orange); transform: rotate(-5deg) translateY(6px); margin-right: -8px; }
.green-char { color: var(--color-green); transform: rotate(3deg); margin-right: -12px; }
.purple-char { color: var(--color-purple); transform: rotate(-4deg) translateY(-4px); }
/* Wobbly hover effect on whole signature */
.signature:hover {
transform: translateX(-50%) rotate(2deg) scale(1.03);
transition: transform 0.1s steps(2);
}
/* Styles for Diary page - simple list of links and dates */
.diary-list {
list-style-type: none;
padding-left: 0;
}
.diary-list li {
margin-bottom: 25px;
}
.post-title {
color: var(--color-blue);
text-decoration: underline;
font-size: 30px;
font-weight: bold;
}
.post-title:hover {
color: var(--color-red);
}
/* Make future entry look faded and struck-through */
.post-future {
color: #999;
text-decoration: line-through;
opacity: 0.5;
font-weight: normal;
pointer-events: none; /* Can't click future posts */
}
.post-date {
color: var(--color-purple);
font-size: 22px;
margin-left: 15px;
font-style: italic;
}
/* Portfolio page - simple grayscale to color hover grid */
.works-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 15px;
margin-top: 30px;
}
.works-grid img {
width: 100%;
height: 180px;
object-fit: cover;
border: 3px solid var(--color-black);
border-radius: 6px;
}
/* Simple flat grayscale style by default */
.gray-scale {
filter: grayscale(100%);
}
/* Simple color transition on hover - not 3D scale or rotation */
.gray-scale:hover {
filter: grayscale(0%);
}
/* Diary Entry styles - simple page, no complex elements */
.post-content .post-date {
color: var(--color-teal);
margin-left: 0;
margin-top: -10px;
margin-bottom: 30px;
}
.entry p {
line-height: 1.4;
margin-top: 20px;
}
.back-link {
display: inline-block;
margin-top: 40px;
color: var(--color-blue);
text-decoration: underline;
}
.back-link:hover {
color: var(--color-red);